import { useState,useCallback,useEffect } from 'react'
import Button from './Button'

function App() {
  const [count1,setCount1] = useState(0);
  const [count2,setCount2] = useState(0);
  const [count3,setCount3] = useState(0);
  // 以上任何一个状态改变，handleClickButton1重新生成
  const handleClickButton1 = () => {
    setCount1(count1+1);
  }
  // useCallback hooks函数  
  // 返回值是真正传给子组件的函数  
  const handleClickButton2 = useCallback(() => {
    setCount2(count2+1);
  },[count2])

  useEffect(() => {
    setTimeout(() => {
      setCount2(count2+1)
    },1200)
  },[])

  return (
    <div className="App">
     <div>
      <Button onClickButton={handleClickButton1}>
        Button1
      </Button>
     </div>
     <div>
      <Button onClickButton={handleClickButton2}>
        Button2
      </Button>
     </div>
     <div>
      <Button onClickButton={() => {
        setCount3(count3+1)
      }}>Button3</Button>
     </div>
    </div>
  )
}

export default App
